<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>烟园疫苗预约后台</title>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.0/xlsx.core.min.js"></script>
		<script src="./js/axiox.min.js"></script>
		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.7/dist/layui.js">
			< script src = "js/vue.js"
			type = "text/javascript"
			charset = "utf-8" >
		</script>
	</head>
	<body>
		<div id="app">
			<div class="layui-nav">
				<ul lay-filter="">
					<li class="layui-nav-item layui-nav-itemed"><a href="./index.html">疫苗接种预约小程序后台</a>
					</li>
					<li class="layui-nav-item">
						<a href="./add.html">添加预约时段</a>
					</li>
					<li class="layui-nav-item"><a href="./import.html">导入可接种数据</a></li>
					<li class="layui-nav-item"><a href="./viewer.html">查看全部数据</a></li>
				</ul>


			</div>
			<div style="margin: 30px;">
				<h2 style="margin: 30px;">导入的数据，数据库里面以前如果有的话，就覆盖更新，没有的话就新增。 只需要导入姓名、电话、第一针接种时间即可</h2>
				<div style="margin-bottom: 20px;">
					<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx" />
					<button @click="upload()" class="layui-btn">确认上传</button>

				</div>
				EXCEL转换为JSON格式的数据 : <br><label id="jsonObject"> </label>

			</div>
		</div>
	</body>
</html>


<script src="./js/vue.min.js"></script>
<script src="./js/jQuery.js"></script>

<script>
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	}
	$(document).ready(function() {
		$("#fileUploader").change(function(evt) {
			var selectedFile = evt.target.files[0];
			var reader = new FileReader();
			reader.onload = function(event) {
				var data = event.target.result;
				var workbook = XLSX.read(data, {
					type: 'binary'
				});
				workbook.SheetNames.forEach(function(sheetName) {
					var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[
						sheetName]);
					if (XL_row_object.length > 0) {
						var json_string = JSON.stringify(
							XL_row_object);
						json_string = json_string.replaceAll("姓名", "name");
						json_string = json_string.replaceAll("电话", "phone");
						json_string = json_string.replaceAll("联系方式", "phone");
						json_string = json_string.replaceAll("手机号", "phone");
						json_string = json_string.replaceAll("第一针接种时间", "dose_first_time");
						document.getElementById("jsonObject").innerHTML = json_string;
					}

				})
			};
			reader.onerror = function(event) {
				console.error("File could not be read! Code " + event.target.error.code);
			};
			// 读取上传文件为二进制
			reader.readAsBinaryString(selectedFile);
		});
	});
</script>

<script>
	// 读取本地excel文件
	function readWorkbookFromLocalFile(file, callback) {
		var reader = new FileReader();
		reader.onload = function(e) {
			var data = e.target.result;
			var workbook = XLSX.read(data, {
				type: 'binary'
			});
			if (callback) callback(workbook);
		};
		reader.readAsBinaryString(file);
	}
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	var app = new Vue({
		el: '#app',
		data: {
			url:'',
		},
		methods: {
			upload: function() {
				var json_string = document.getElementById('jsonObject').innerText;

				console.log(json_string)
				var json_data = JSON.parse(JSON.stringify(json_string));
				console.log(json_data);
				axios({
					method:'POST',
					url:this.url+'/api/ImportStudentData',
					data:json_data
				}).then(function(res){
					var res_json = JSON.parse(JSON.stringify(res.data));
					if(res_json.success==1)
					{
						alert('导入成功！');
					
					}
					else
					{
						alert('导入失败！');
					}
				})
			}
		}
	});
</script>
